<!DOCTYPE html>
<html>

<head>
    <title>游戏助理阿龙</title>
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>

<body>
    <nav id="top-nav">
        <div>
            <div class="nav-item active">当前对话</div>
            <div class="nav-item">游戏库</div>
            <div class="nav-item">设置</div>
        </div>
        <div id="intro">
            <h2>🕹️ 游戏助理阿龙</h2>
            <p>我是专注游戏领域的智能助理，擅长：<br>
                ✅ 游戏攻略解析<br>
                ✅ 隐藏要素发现<br>
                ✅ 多平台兼容问题解决<br>
                ✅ 实时数据查询<br>
                24小时为您提供专业游戏咨询服务！</p>
        </div>
    </nav>

    <div class="main-container">
        <!-- 左侧历史记录栏 -->
        <div class="history-sidebar">
            <div id="add"><i style="font-size: 1rem;">+ </i>新聊天</div>
            <div id="history-list">
                <!-- 添加正确的容器ID -->
                <div class="history-item">2024-03-20 暗黑4讨论</div>
                <div class="history-item">2024-03-19 艾尔登法环问题</div>
                <div class="history-item">2024-03-18 塞尔达攻略</div>
            </div>

        </div>

        <!-- 右侧聊天主区域 -->
        <div class="chat-container">

            <div class="chat">
                <div id="chatbox"></div>
                <div id="input-box">
                    <input type="text" id="user-input" placeholder="输入您的问题...">
                    <button id="save-btn" title="手动保存对话">
                        <i class="fas fa-save"></i>
                    </button>
                    <button id="send-btn">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
            </div>

        </div>
        <div id="game-library">
            <button class="close-btn">
                <i class="fas fa-times"></i>
            </button>
            <div class="game-item">艾尔登法环</div>
            <div class="game-item">塞尔达传说：王国之泪</div>
            <div class="game-item">暗黑破坏神4</div>
            <div class="game-item">原神</div>
            <div class="game-item">怪物猎人：崛起</div>
        </div>
    </div>

    <script src="./js/main.js"></script>

    <!-- 新增设置弹窗 -->
    <div id="settings-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>系统设置</h3>
                <button class="close-btn">
                    <i class="fas fa-times"></i>
                </button>

            </div>
            <div class="modal-body">
                <div class="setting-item">
                    <label>主题模式：</label>
                    <select id="theme-select">
                        <option value="light">浅色模式</option>
                        <option value="dark">深色模式</option>
                    </select>
                </div>
                <div class="setting-item">
                    <label>自动保存：</label>
                    <input type="checkbox" id="auto-save">
                </div>
            </div>
        </div>
    </div>
</body>

</html>